<template>
<div class="container">
  <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="return"
  />
  <div class="details">
<!--    <div class="title">{{this.title}}</div>-->
    <div v-html="this.content" class="content"></div>
  </div>

<!--  新闻详情底部固定-->
  <div class="detailsFoot">
      <div class="foot">
        <div class="small">
          <van-icon is-link @click="show = true" name="comment-o" size="30">

          </van-icon>
        </div>
      </div>
      <div class="foot">
        <div class="small" >
          <van-icon :class="shows ? 'red':''" @click="shows = !shows"  name="star-o" size="30"/>
        </div>
      </div>
      <div class="foot">
        <div class="small">
          <van-icon :class="shows1 ? 'red1':''" @click="shows1 = !shows1" name="good-job-o" size="30"/>
        </div>
      </div>
      <div class="foot">
        <div class="small">
          <van-icon name="share-o" size="30" @click="showShare = true" />
          <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
          />
<!--          -->
        </div>
      </div>
    <div class="foot">
      <div class="small">
        <van-icon name="arrow-left" size="30" @click="onClickLeft"/>
      </div>
    </div>
  </div>
  <van-action-sheet
      v-model="show"
      cancel-text="取消"
      close-on-click-action
      @select="selectShow"
  >

    <div class="contents">
      评论人：<input class="con" type="text" v-model="person" placeholder="尊姓大名">
      <van-field
          v-model="message"
          rows="2"
          autosize
          label="评论:"
          type="textarea"
          maxlength="50"
          placeholder="友善评论、理性发言"
          show-word-limit
          class="text"
      />
      <van-button class="commit" color="#F00000" size="small" @click="commit">发布</van-button>
    </div>
    <div class="comment">
      <ul>
        <li v-for="(item,index) in comment" :key="index" class="comments">
          {{item.person}}:{{item.message}}
        </li>
      </ul>
    </div>
  </van-action-sheet>
<!--  返回顶部-->
  <van-icon v-if="btnFlag" class="icon" name="back-top" size="50" @click="goTop" />
</div>
</template>

<script>
import { getNewDetails} from "@/api/index-api";
import { Toast } from 'vant';
export default {
  name: "NewDetails",
  data(){
    return{
      //新闻详情
      NewDetails:null,
      //新闻文本
      content:null,
      //新闻标题
      title:null,
      //判断收藏
      shows:false,
      //判断点赞
      shows1:false,
      //判断分享
      showShare:false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: 'QQ', icon: 'qq' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      //判断返回顶部
      btnFlag:false,
      //评论
      show:false,
      message:'',
      //评论人
      person:'',
      comment:[],
      lists:[]
    }
  },
  props:{
    articleId:String,

  },
  //返回顶部 window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods:{
    selectShow(){
      this.show = false
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    //分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //实现返回顶部
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    goTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 700) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    commit1(){
      this.$router.go(0)
      // this.$refs.no.style.display='none'
    },
    commit(){
      console.log(this.person);
      console.log(this.message);
      if(this.message==='' ||   this.person==='' ){
        alert("不能为空")
      }else{
        this.comment.unshift({
          person:this.person,
          message:this.message
        })
        localStorage.lists = JSON.stringify((this.comment))
      }
      this.message=""
      this.person=""
    },

  },
  created(){
    this.comment = JSON.parse(localStorage.lists) || []
    console.log(this.$route.query.articleId);
    getNewDetails(this.$route.query.articleId).then(({code,data})=>{
      if(code === 0){
        this.NewDetails = data;
        console.log(this.NewDetails)
        console.log(this.NewDetails.content)
        this.content = this.NewDetails.content
        this.title = this.NewDetails.title
        // console.log(this.title)
      }
    })
  }
}
</script>

<style scoped lang="less">
.container{
  padding-bottom:70px;
  padding-top:60px;
}
/deep/img{
  width: 100%;
}
.details{
  margin:0 13px;
  //background-color:#fff4fa;
}
.title{
  font-size:30px;
  font-weight:500;
  font-family: 楷体;
}
.content{
  font-size:20px;
  /deep/p:nth-of-type(1){
    //color:#666;
    font-size:25px;
    font-weight:500;
    font-family: 楷体;
  }
  /deep/p:nth-of-type(1){

  }
  /deep/p{
    margin-top:5px;
    margin-bottom:10px;
  }
}
/deep/.like{
 color:yellow;
}
.red{
  color:#F00000;
}
.red1{
  color:#F00000;
}
/deep/.return {
  display: flex;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color:white;
  border-bottom:1px solid #ddd;
  z-index:1001;
}
/deep/.van-nav-bar__title{
  max-width:60%;
  margin:0 0 0 40px;
  //margin:0 auto;
  color:black;
}
/deep/.van-nav-bar__arrow{
  font-size:30px;
  color:black;
}
/deep/.van-nav-bar__text{
  display:none;
}
.detailsFoot{
  display:flex;
  width:100%;
  height:58px;
  position:fixed;
  bottom:0;
  left:0;
  background-color: white;
  z-index:1001;
  border-top:1px solid #ddd;
}
.foot{
  width:20%;
  justify-content: center;
  align-items: center;
}
.small{
  display:flex;
  justify-content: center;
  align-items: center;
  padding-top:15px;
}
.icon{
  position:fixed;
  bottom:60px;
  right:10px;
  opacity: 0.3;
  width:50px;
  height:50px;
  background-color:#F00000;
  color:white;
  border-radius:30%;
}
/deep/.van-nav-bar__left{
  padding:0;
}
.contents {
  padding: 16px 16px 50px;
  position:relative;
}
.comment,.comments{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  font-size:20px;
  //border:1px solid blue;
  margin:5px;
}
.comments,.con{
  border:1px solid #F00000;
  padding:5px;
  border-radius:10px;
}
.contents,.text{
  font-size:20px;
  color:black;
}
///deep/.content{
//  padding:16px 16px 50px;
//  //position:relative;
//}
/deep/.van-cell{
  padding:10px 0;
}
/deep/.van-field__label{
  width:65px;
}
.commit{
  position:absolute;
  right:10px;
  bottom:10px;
  //margin-top:10px;
}
.commit1{
  position:absolute;
  right:70px;
  bottom:10px;
  //margin-top:10px;
}
</style>